<script setup>
import { usePreviewTextStore } from "@/stores/previewTextStore.js";
import { CopyDocument } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

const previewTextStore = usePreviewTextStore();

const copyToClipboard = () => {
  navigator.clipboard.writeText(previewTextStore.value)
      .then(() => {
        ElMessage.success('复制成功');
      })
      .catch(() => {
        ElMessage.error('复制失败');
      });
};
</script>

<template>
  <el-dialog
      v-model="previewTextStore.show"
      @close="previewTextStore.clear"
      :close-on-press-escape="true"
  >
    <template #header="{ titleId, titleClass }">
      <div class="custom-dialog-header">
        <span :id="titleId" :class="titleClass">{{ previewTextStore.title }}</span>
        <el-button
            type="text"
            @click="copyToClipboard"
            :icon="CopyDocument"
            circle
            class="copy-btn"
        />
      </div>
    </template>

    <div style="white-space: pre-line">{{ previewTextStore.value }}</div>
  </el-dialog>
</template>

<style scoped>
.custom-dialog-header {
  display: flex;
  width: 100%;
}

.copy-btn {
  margin-left: auto;
  padding: 8px;
}
</style>